<template>
    <div class="wrapper wallet">
        <mt-header title="RB" mtClass="no-bg-fff" leftPath="/account"/>
        <div class="banner">
            <img src="static/wallet-bg.png">
		    <div class="text">
                <div class="money">{{walletInfo.dlbCount || '0'}}</div>
                <!-- <div class="eth">≈ {{walletInfo.ethExchangePrice || '0'}} eth</div> -->
                <div class="toDetail" @click="$router.push('/account/wallet/bill')">查看明细 ></div>
            </div>
        </div>
        <div class="dataPanel">
            <div class="panel">
                <div class="panel-item">
                    <div>阅读奖励</div>
                    <div>{{walletInfo.readEarnings || '0'}}</div>
                </div>
                <div class="panel-item">
                    <div>视频奖励</div>
                    <div>{{walletInfo.videoEarnings || '0'}}</div>
                </div>
            </div>
            <div class="panel">
                <div class="panel-item">
                    <div>分成奖励</div>
                    <div>{{walletInfo.readDivideEarnings || '0'}}</div>
                </div>
                <div class="panel-item">
                    <div>好友充值奖励</div>
                    <div>{{walletInfo.invatationBuyDivideEarnings || '0'}}</div>
                </div>
                <div class="panel-item">
                    <div>其他奖励</div>
                    <div>{{walletInfo.otherEarnings || '0'}}</div>
                </div>
            </div>
        </div>
        <div class="list">
            <mt-cell title="可用" is-link  @click.native="toUsable">
                <img slot="icon" class="icon" src="../../assets/icon-ke.png" alt="">
                <span>{{walletInfo.availableDlb || '0'}}</span>
            </mt-cell>
            <mt-cell title="解锁中" is-link @click.native="$router.push('/account/wallet/unlock')">
                <img slot="icon" class="icon" src="../../assets/icon-locking.png" alt="">
                <span>{{walletInfo.unlockDlb || '0'}}</span>
            </mt-cell>
            <mt-cell title="已锁定" is-link @click.native="toLock">
                <img slot="icon" class="icon" src="../../assets/icon-locked.png" alt="">
                <span>{{walletInfo.lockDlb || '0'}}</span>
            </mt-cell>
        </div>
        <mt-tabbar fixed class="walletTab" :class="{'iphonex':iphonex=='1'}">
            <mt-tab-item id="提现" @click.native="toCash">
                <span>提现</span>
            </mt-tab-item>
            <mt-tab-item id="充值" class="active" @click.native="$router.push('/account/wallet/recharge')">
                <span>充值</span>
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template>

<script>
import { mapActions } from 'vuex'
import mtHeader from "@/components/Header"
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            walletInfo:{},
            userInfo: {},
            iphonex:'0'
        };
    },
    components:{
        mtHeader
    },
    mounted(){
        this.iphonex = this.get_iphonex_flag()
    },
    activated(){
        this.init();
    },
    methods: {
        ...mapActions('user', [
            'get_userInfo_cache',
            'get_userInfo_data'
        ]),
        ...mapActions('wallet', [
            'get_walletInfo_data'
        ]),
        ...mapActions('app', [
            'get_iphonex_flag'
        ]),
        init(){
            // 用户信息的缓存？缓存 : 发送请求
            this.get_userInfo_cache()
            .then(res => {
                if (res) {
                    this.userInfo = res
                } else {
                    this.get_userInfo_data().then(res => {
                        this.userInfo = res
                    })
                }
            })
            this.get_walletInfo_data().then(res => {
                this.walletInfo = res
            })
        },
        toUsable(){
            this.$router.push({
                path:'/account/wallet/usable',
                query:{ 
                    availableDlb: this.walletInfo.availableDlb
                }
            })
        },
        toLock(){
            this.$router.push({
                path:'/account/wallet/lock',
                query:{ 
                    lockDlb: this.walletInfo.lockDlb
                }
            })
        },
        toCash(){
            // 未设置支付密码
            if( this.userInfo.payPassword == '1'){  
                Toast({
                    message: '请先设置支付密码'
                });
                return false;
            }
            // 未实名认证
            if( this.userInfo.realState != '3'){  
                Toast({
                    message: '请先完成实名认证'
                });
                return false;
            }
            // 提现
            this.$router.push({
                path:'/account/wallet/tocash',
                query:{ 
                    extractCharge: this.walletInfo.extractCharge,
                    availableDlb: this.walletInfo.availableDlb,
                    mobile: this.userInfo.mobile
                }
            })
        }
    }
};
</script>

<style lang="stylus" scoped>
.wrapper{
    .banner{
        position: relative;
        .text {
            position: absolute;
            top: 30%;
            width: 100%;
            text-align: center;
            font-size:14px;
            color: rgba(255,255,255,1);
            .money{
                font-size:34px;
            }
            .eth{
                margin-bottom:10px;
            }
        }
    }
    .dataPanel{
        background:#F4F5FA;
        padding: 10px 15px;
        .panel{
            background:#fff;
            padding: 20px 0 25px 0;
            display:flex;
            height:85px;
            .panel-item{
                flex:1;
                text-align:center;
                position:relative;
                &:before{
                    content: '';
                    width:1px;
                    height:20px;
                    background:#DBDDE8;
                    position:absolute;
                    top:10px;
                    right:0;
                }
                &:last-child{
                    &:before{
                        width:0px;
                    }
                }
                div{
                    &:first-child{
                        margin-bottom:5px;
                        font-size:12px;
                        color:#B3B3B3;
                    }
                    &:last-child{
                        font-size:16px;
                        color:#333333;
                        font-weight:bold;
                    }
                    img{
                        width:22px;
                        height:22px;
                        display:inline-block;
                        vertical-align:middle;
                        margin-right:10px;
                    }
                }
            }
            &:first-child{
                border-top-left-radius:5px;
                border-top-right-radius:5px;
                .panel-item{
                    &:first-child{
                        div{
                            &:first-child{
                                color:#5F88FF;
                            }
                            &:last-child{
                                color:#5F88FF;
                                font-size:18px;
                            }
                        }
                    }
                    &:last-child{
                        div{
                            &:first-child{
                                color:#5F88FF;
                            }
                            &:last-child{
                                color:#5F88FF;
                                font-size:18px;
                            }
                        }
                    }
                }
            }
            &:last-child{
                border-bottom-left-radius:5px;
                border-bottom-right-radius:5px;
                border-top:1px solid #F4F5FA;
            }
        }
    }
    .walletTab{
        background: #fff;
        &.iphonex{
            bottom: 35px;
        }
    }
    .list{
        img{
            width:22px !important;
            height:22px !important;
            margin-right:10px;
        }
    }
}
</style>